<template>
  <el-container class="home-container">
    <el-scrollbar>
      <!-- 侧边栏 -->
      <el-aside width="auto">
        <div class="logo"></div>
        <el-menu
          :default-active="State"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="rgb(48, 65, 86)"
          text-color="rgb(191, 203, 217)"
          router
        >
          <!-- 一级菜单 -->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <!-- 一级菜单图标文字 -->
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/'+subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="menuState('/'+subItem.path)"
            >
              <!-- 二级菜单图标文字 -->
              <template slot="title">
                <i class="el-icon-wallet"></i>
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
    </el-scrollbar>
    <!-- 右侧 -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <i class="el-icon-s-unfold" @click="collapse" style="font-size:30px"></i>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple" style="font-size:24px;text-align: center">XXX后台管理系统</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-dropdown trigger="click">
                <el-button plain>
                  <span class="demonstration">
                    退出
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-button style="width:100%" @click="logout">1</el-button>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item>切换账号</el-dropdown-item>
                  <el-dropdown-item>退出登陆</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 主体区域 -->
      <el-main>
        <!-- 组件渲染 -->
        <el-card>
          <router-view></router-view>
        </el-card>
        
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  // 组件注册
  components: {},
  data() {
    return {
      isCollapse: false,
      menuList: [],
      iconsObj: {
        // 一级菜单的icon图标
        125: "el-icon-user-solid",
        103: "el-icon-s-check",
        101: "el-icon-s-goods",
        102: "el-icon-s-claim",
        145: "el-icon-s-data"
      },
      // 菜单激活状态
      State: ""
    };
  },
  created() {
    // 调用获取菜单的函数
    this.getUserList(),
    // 把激活状态从sessionStorage里面拿出来
    // this.State = window.sessionStorage.getItem("activePath");
    this.State = this.$route.path;
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 退出登陆
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // 获取导航栏数据
    getUserList() {
      this.$axios.get("menus").then(res => {
        this.menuList = res.data.data;
      });
    },
    // 获取菜单激活状态
    menuState() {
      // window.sessionStorage.setItem("activePath", activePath);
      this.State = this.$route.path;
    },
  },
  // 监听路由变化
  watch:{
    $route:'menuState'
  }
};
</script>
<style scoped>
.home-container {
  height: 100%;
  background: rgb(48, 65, 86);
}
.el-header {
  background-color: #fff;
  color: black;
  line-height: 60px;
}

.el-aside {
  overflow-x: hidden;
}
.el-main {
  background-color: #eee;
}
.el-menu {
  border-right: 0px;
}
/* 二级菜单鼠标悬停效果 */
.el-menu-item:hover {
  color: rgb(191, 203, 217) !important;
  background-color: #1f2d3d !important;
}
/* 二级菜单选中的样式 */
.el-menu-item.is-active {
  border-left: #33a2ef solid 6px !important;
  color: #fff !important;
  background-color: #1f2d3d !important;
}
.el-menu-item {
  height: 60px !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
</style>
<style>
/* 一级菜单鼠标悬停的效果 */
.el-submenu .el-submenu__title:hover {
  color: rgb(191, 203, 217) !important;
  background-color: #1f2d3d !important;
}
</style>